<template>
  <div class="demo">
    <h2 class="title">学生姓名 {{ name }}</h2>
    <h2 class="fd">性别 {{ sex }}</h2>
  </div>
</template>

<script>
export default {
  name: "Vue2Student",

  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
};
</script>

<!-- lang="xx" 可以为 css less sass... -->
<!-- 直接使用less会报错需要安装less-loader：npm i less-loader -->
<!-- 不写 lang 默认为css -->
<style scoped lang="less">
  .demo{
    background-color: orange;
    .fd{
      font-size: 40px;
    }
  }
</style>
